
:root {
  --element-font-color: #BFCBD9;
  --element-font-active-color: #51d6a9;
  --element-dialog-header-background: #2c2c32;
  --element-dialog-footer-border-color: #0f0f0f;
  --element-el-dialog-close-color: #ffffff;
  --element-el-dialog-title-color: #d9d9da;
  --element-el-input-background: #39393a;
  --element-border-color: #585858;
  --element-input-number-crease: #39393a;
  --element-el-upload-dragger-borderColor: rgba(255, 255, 255, 0.24);
  --element-el-upload-dragger-hover-borderColor: #f7de98;
  --element-el-button-is-disabled-bg: #232324;
  --element-el-button-is-disabled-color: #686869;
  --element-el-button-is-disabled-border-color: rgba(255, 255, 255, 0.24);
  --element-el-button-bg: #232324;
  --element-el-button-border-color: rgba(255, 255, 255, .1);
  --element-el-button-hover-color: #f7de98;
  --element-el-select-bg: #18181c;
  --element-el-select-item-hover-bg: #1e1e1f;
  --element-el-divider-border-color: #ffffff17;
  --element-el-divider-font-color: #E6A23C;
}

.light {
  --element-font-color: #333639;
  --element-font-active-color: #1488f4;
  --element-dialog-header-background: #ffffff;
  --element-dialog-footer-border-color: #ffffff;
  --element-el-dialog-close-color: #d9d9da;
  --element-el-dialog-title-color: #303133;
  --element-el-input-background: #ffffff;
  --element-border-color: #ccc;
  --element-input-number-crease: #f5f5f5;
  --element-el-upload-dragger-borderColor: ##dcdfe6;
  --element-el-upload-dragger-hover-borderColor: #409eff;
  --element-el-button-is-disabled-bg: #f2f3f5;
  --element-el-button-is-disabled-color: #939497;
  --element-el-button-is-disabled-border-color: rgb(224, 224, 230);
  --element-el-button-bg: #ffffff;
  /* --element-el-button-bg: #333639; */
  --element-el-button-border-color: #e0e0e6;
  --element-el-select-bg: #ccc;
  --element-el-select-item-hover-bg: #f5f7fa;
  --element-el-divider-border-color: #ffffff;
  --element-el-divider-font-color: #333639;
}

.el-menu {
  background: transparent!important;
  border: none!important;
  transition: all .3s;
  width: 100%;
}

.el-sub-menu .el-menu-item {
  background: transparent;
}

.el-sub-menu__title,
.el-menu-item {
  height: 40px!important;
  border-radius: 5px;
  margin-bottom: 5px;
  font-size: 14px!important;
}

.el-sub-menu__title:hover,
.el-menu-item:hover {
  background: rgba(81, 214, 169, .2)!important;
}

.el-sub-menu .el-menu-item:hover {
  background: rgba(81, 214, 169, .2)!important;
}

.el-menu-item, 
.el-sub-menu .el-sub-menu__icon-arrow,
.el-sub-menu__title {
  color: var(--element-font-color)!important;
  transition: all .3s;
}

.el-sub-menu .el-sub-menu__icon-arrow {
  position: absolute;
  right: 10px!important;
}

.el-sub-menu__title {
  padding-left: 10px!important;
}

.el-menu-item.is-active {
  background-color: rgba(81, 214, 169, .5);
  color: var(--element-font-active-color)!important;
}

.el-tabs--card>.el-tabs__header {
  border: none!important;
}

.el-tabs__header {
  margin: 0;
}

/* el-dialog */
.el-dialog__header,
.el-dialog__body,
.el-dialog__headerbtn,
.el-dialog__footer {
  background-color: var(--element-dialog-header-background)!important;
  top: 0!important;
}

.el-dialog__footer {
  border-top: 1px solid var(--element-dialog-footer-border-color)!important;
  top: 0!important;
}

.el-dialog__body {
  padding: 10px 5px!important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: var(--element-el-dialog-close-color)!important;
}

.el-dialog__title,
.el-dialog__footer {
  color: var(--element-el-dialog-title-color)!important;
}

.el-message-box {
  border: none;
  background-color: var(--element-dialog-header-background)!important;
}
.el-message-box__title,
.el-message-box__message {
  color: var(--element-el-dialog-close-color)!important;
}

/* 输入框 */
.el-input__wrapper,
.el-textarea__inner {
  background-color: var(--element-el-input-background)!important;
  transition: border-color .5s, box-shadow .5s!important;
  /* 去掉边框 目前只能通过设置box-shadow的方式 */
  border: 1px solid var(--element-el-input-background)!important;
  box-shadow: 0 0 3px var(--element-el-input-background)!important;
}
.el-input__inner,
.el-textarea__inner {
  color: var(--element-font-color)!important;
}
.el-input__wrapper:hover,
.el-input__wrapper.is-focus {
  border: 1px solid #f7de98!important;
  box-shadow: 0 0 3px #f7de98!important;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: var(--element-el-button-is-disabled-bg)!important;
  color: var(--element-el-button-is-disabled-color)!important;
  border-color: var(--element-el-button-is-disabled-border-color)!important;
}

.el-radio-button .el-radio-button__inner {
  background-color: var(--element-dialog-header-background)!important;
  border: 1px solid var(--element-border-color)!important;
  /* border-left: none; */
}
.el-radio-button.is-active,
.el-radio-button__original-radio:checked+.el-radio-button__inner  {
  border-radius: 4px;
  box-sizing: border-box!important;
  /* background-color: rgba(247, 222, 152, .8)!important; */
  border-color: #f7de98!important;
}
.el-form-item__label {
  color: var(--element-font-color)!important;
}
.el-input-number.is-controls-right .el-input-number__decrease,
.el-input-number.is-controls-right .el-input-number__increase {
  background-color: var(--element-input-number-crease);
  border: 2px solid var(--element-input-number-crease)!important;
}

.el-upload-dragger {
  width: 100%!important;
  padding: 10px!important;
  background-color: transparent!important;
  border-color: var(--element-el-upload-dragger-borderColor)!important;
}
.el-upload-dragger:hover {
  border-color: var(--element-el-upload-dragger-hover-borderColor)!important;
}
.el-upload__text {
  width: 100%!important;
}

.clear-bg {
  width: 100%;
  margin: 0 auto;
}
.el-button {
  background-color: var(--element-el-button-bg)!important;
  color: var(--element-font-color)!important;
  border-color: var(--element-el-button-border-color)!important;
  transition: all .5s!important;
}
.el-button:hover {
  color: var(--element-el-button-hover-color)!important;
  border-color: var(--element-el-button-hover-color)!important;
}
.el-button.is-disabled,
.el-input.is-disabled .el-input__wrapper {
  background-color: var(--element-el-button-is-disabled-bg)!important;
  color: var(--element-el-button-is-disabled-color)!important;
  border-color: var(--element-el-button-is-disabled-border-color)!important;
}

.el-input .el-input__count .el-input__count-inner {
  background-color: transparent!important;
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px!important;
  background: linear-gradient(90deg, #605844, #a29369)!important;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #605844, #a29369)!important;
  right: 0!important;
}

.el-collapse {
  border-color: var(--element-border-color)!important;
}

.el-collapse-item__header {
  height: 42px!important;
  padding: 10px!important;
  box-sizing: border-box;
  background: transparent!important;
  border-color: var(--element-border-color)!important;
  color: var(--element-font-color)!important;
}
.el-collapse-item__wrap {
  background-color: transparent!important;
  border-color: var(--element-border-color)!important;
}
.el-collapse-item__content {
  padding-top: 20px;
}
.el-collapse-item__header.is-active {
  border-bottom: none;
}

.el-popper.is-light.wft-select-style {
  background-color: var(--element-el-select-bg)!important;
  border: 1px solid var(--element-el-button-is-disabled-bg)!important;
}
.wft-select-style.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
  background: var(--element-el-select-bg)!important;
  border: 1px solid var(--element-el-select-bg)!important;
}
.wft-select-style.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
  background: var(--element-el-select-bg)!important;
  border: 1px solid var(--element-el-select-bg)!important;
}
.wft-select-style .el-select-dropdown__item.hover,
.wft-select-style .el-select-dropdown__item:hover {
  background: var(--element-el-select-item-hover-bg)!important;
}
.wft-select-style .el-select-dropdown__item {
  color: var(--element-font-color)!important;
}
.wft-select-style .el-select-dropdown__item.selected {
  color: var(--element-el-button-hover-color)!important;
}
.wft-select-style .el-select-dropdown__item.is-disabled {
  /* background-color: var(--element-el-button-is-disabled-bg)!important; */
  color: var(--element-el-button-is-disabled-color)!important;
}
.wft-select-style .el-select-dropdown__item.is-disabled:hover {
  background: none!important;
}

.el-divider--horizontal {
  margin: 5px 0 25px 0!important;
  border-color: var(--element-el-divider-border-color)!important;
}

.el-divider__text.is-left {
  background-color: var(--element-input-number-crease);
  color: var(--element-el-divider-font-color);
  font-size: 12px;
  border-radius: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
  transition: color .3s, background-color .3s;
}
